<template>
  <div class="workload-statement">
    <div class="title">康复治疗项目医生操作汇总表</div>
    <div class="search">
      <el-row>
        <el-col :span="20">
          <AElFormRex :data="form" :rows="1" />
        </el-col>
        <el-col :span="4">
          <el-button type="primary">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-whole">
      <AElTable :data="tableData" :columns="columns" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkloadStatement',
  data() {
    return {
      form: {}, // 配置表单
      tableData: [], // 表格数据
      columns: [], // 表格配置
    }
  },
  created() {
    this.getData();
    this.setForm();
    this.setTable();
  },
  methods: {
    /**
     * 获取随机数
     */
    getRandom(value = 100) {
      return (Math.random() * value).toFixed(2)
    },
    getTestData() {
      let { getRandom = () => null } = this;
      return {
        dzswfklf: getRandom(),
        ydlf: getRandom(),
        jzzcxtxl: getRandom(),
        ddqlcxl: getRandom(),
        sdnxl: getRandom(),
        yyyd: getRandom(),
        zylf: getRandom(),
        yyxl: getRandom(),
        tygnzaxl: getRandom(),
        rzzj: getRandom(),
        kfpd: getRandom(),
      }
    },
    /**
     * 获取数据
     */
    getData() {
      let list = [
        { xm: "刘春花", ...this.getTestData() },
        { xm: "吴思敏", ...this.getTestData() },
        { xm: "刘金玉", ...this.getTestData() },
        { xm: "林华俭", ...this.getTestData() },
        { xm: "叶泽根", ...this.getTestData() },
        { xm: "金鑫鑫", ...this.getTestData() },
        { xm: "赵伯阳", ...this.getTestData() },
        { xm: "郭赵福", ...this.getTestData() },
      ];
      let hjData = { xm: "合计" };
      list.forEach(({ xm, ...rest }) => {
        for (const key in rest) {
          if (Object.prototype.hasOwnProperty.call(rest, key)) {
            if (!hjData[key]) hjData[key] = 0;
            hjData[key] += Number(rest[key]);
          }
        }
      });
      for (const key in hjData) {
        if (Object.prototype.hasOwnProperty.call(hjData, key)) {
          if (key != 'xm') {
            hjData[key] = hjData[key].toFixed(2)
          }
        }
      };
      list.push(hjData);

      this.tableData = list;

    },
    /**
     * 配置表单
     */
    setForm() {
      this.form = {
        date: {
          label: "统计日期",
          type: "datetimerange",
          rangeSeparator: "至"
        }
      }
    },
    /**
     * 配置表格
     */
    setTable() {
      // this.columns = [
      //   { label: "项目", children: [{ label: "单价", prop: "xm", }] },
      //   { label: "电子生物反馈疗法", children: [{ label: "17.00", prop: "dzswfklf" }] },
      //   { label: "运动疗法", children: [{ label: "66.00", prop: "ydlf" }] },
      //   { label: "减重支持系统训练", children: [{ label: "33.00", prop: "jzzcxtxl" }] },
      //   { label: "电动起立床训练", children: [{ label: "26.00", prop: "ddqlcxl" }] },
      //   { label: "手功能训练", children: [{ label: "22.00", prop: "sdnxl" }] },
      //   { label: "有氧训练", children: [{ label: "33.00", prop: "yyyd" }] },
      //   { label: "作业疗法", children: [{ label: "40.00", prop: "zylf" }] },
      //   { label: "言语训练", children: [{ label: "40.00", prop: "yyxl" }] },
      //   { label: "吞咽功能障碍训练", children: [{ label: "33.00", prop: "tygnzaxl" }] },
      //   { label: "认知直觉功能障碍训练", children: [{ label: "28.00", prop: "rzzj" }] },
      //   { label: "康复评定", children: [{ label: "22.00", prop: "kfpd" }] },
      // ]
      this.columns = [
        { label: "项目名称", prop: "xmmc", align: "right", fixed: "left", width: "109px", children: [{ label: "医生姓名", prop: "ysxm", width: "109px", align: "left" }] },
        { label: "项目1", children: [{ label: "单价", prop: "xmmc" }, { label: "人次", prop: "ysxm" }, , { label: "金额", prop: "ysxm" }] },
        { label: "项目2", children: [{ label: "单价", prop: "xmmc" }, { label: "人次", prop: "ysxm" }, , { label: "金额", prop: "ysxm" }] },
        { label: "项目3", children: [{ label: "单价", prop: "xmmc" }, { label: "人次", prop: "ysxm" }, , { label: "金额", prop: "ysxm" }] },
        { label: "项目4", children: [{ label: "单价", prop: "xmmc" }, { label: "人次", prop: "ysxm" }, , { label: "金额", prop: "ysxm" }] },
        { label: "项目5", children: [{ label: "单价", prop: "xmmc" }, { label: "人次", prop: "ysxm" }, , { label: "金额", prop: "ysxm" }] },
        { label: "项目6", children: [{ label: "单价", prop: "xmmc" }, { label: "人次", prop: "ysxm" }, , { label: "金额", prop: "ysxm" }] },
        { label: "项目7", children: [{ label: "单价", prop: "xmmc" }, { label: "人次", prop: "ysxm" }, , { label: "金额", prop: "ysxm" }] },
        { label: "项目8", children: [{ label: "单价", prop: "xmmc" }, { label: "人次", prop: "ysxm" }, , { label: "金额", prop: "ysxm" }] },
        { label: "合计", prop: "hj", fixed: "right" }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.workload-statement {
  padding: 20px;

  .title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }

  .search {
    width: 550px;
    // margin: 20px 0;
    margin-top: 20px;
  }

  :deep(.table-whole) {
    .el-table thead.is-group th {
      background: none;
    }

    .el-table thead.is-group tr:first-of-type th:first-of-type {
      border-bottom: none;
    }

    .el-table thead.is-group tr:first-of-type th:first-of-type:before {
      content: '';
      position: absolute;
      width: 1px;
      height: 75px;
      /*这里需要自己调整，根据td的宽度和高度*/
      top: 0;
      left: 0;
      background-color: #dfe6ec;
      // opacity: 0.3;
      display: block;
      transform: rotate(-53deg);
      /*这里需要自己调整，根据线的位置*/
      transform-origin: top;
    }

    .el-table thead.is-group tr:last-of-type th:first-of-type:before {
      content: '';
      position: absolute;
      width: 1px;
      height: 75px;
      /*这里需要自己调整，根据td的宽度和高度*/
      bottom: 0;
      right: 0;
      background-color: #dfe6ec;
      // opacity: 0.3;
      display: block;
      transform: rotate(-54deg);
      /*这里需要自己调整，根据线的位置*/
      transform-origin: bottom;
      // background:red;
    }
  }
}
</style>
